<template>
  <section>
    <!-- 面包屑 -->
    <breadcrumbs></breadcrumbs>
    <p class=""><i class="el-icon-s-home mgr-5"></i>平台信息</p>
    <el-row :gutter="20" class="mgb-20">
      <el-col :span="6">
        <el-card class="box-card h200">
          <div slot="header" class="clearfix ">
            <span class="font-w6">网课总数</span>
          </div>
          <div class="flex-around">
            <div class="flex1 flex-center-c">
              <el-link class="font28 mg-0"><span class="color-FF8C00 pdr-10" @click="caigoudan">{{tableData.courseAllCount || 0}}</span>课</el-link>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card h200">
          <div slot="header" class="clearfix ">
            <span class="font-w6">总计学习人数</span>
          </div>
          <div class="flex-around">
            <div class="flex1 flex-center-c">
              <el-link class="font28 mg-0"><span class="color-FF8C00 pdr-10" @click="jifen">{{tableData.allStudyCount || 0}}</span>人</el-link>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card h200">
          <div slot="header" class="clearfix ">
            <span class="font-w6">总计（视频）学习时长</span>
          </div>
          <div class="flex-center-c">
            <div class="flex-between  pdt-10 pdb-10">
              <span><span class="color-FF8C00 font28 pdr-10">{{tableData.allStudyTime}}</span>时</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card h200">
          <div slot="header" class="clearfix ">
            <span class="font-w6">总计收藏数</span>
          </div>
          <div class="flex-center-c">
            <div class="flex-between  pdt-10 pdb-10">
              <span><span class="color-FF8C00 font28 pdr-10">{{tableData.allCollectionCount}}</span>个</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="mgb-20">
      <el-col :span="24">
        <el-card class="box-card ">
          <div slot="header" class="clearfix ">
            <span class="font-w6">运维管理统计</span>
          </div>
          <div class="flex-around">
            <div class="flex1 flex-center-c">
              <p class="font28 mg-0"><span class="pdr-10">{{tableData.allUpCount || 0}}</span>人</p>
              <p class="f12 mg-0 mgb-25 mgt-10">点赞数</p>
            </div>
            <div class="flex1 flex-center-c">
              <p class="font28 mg-0"><span class="pdr-10">{{tableData.allCommentCount || 0}}</span>个</p>
              <p class="f12 mg-0 mgb-25 mgt-10">评价数</p>
            </div>
            <div class="flex1 flex-center-c">
              <p class="font28 mg-0"><span class="pdr-10">{{tableData.allDownCount || 0}}</span>个</p>
              <p class="f12 mg-0 mgb-25 mgt-10">课件下载总数</p>
            </div>
            <div class="flex1 flex-center-c">
              <p class="font28 mg-0"><span class="pdr-10">{{tableData.allTeacherCount || 0}}</span>个</p>
              <p class="f12 mg-0 mgb-25 mgt-10">名师总数量</p>
            </div>
            <div class="flex1 flex-center-c">
              <p class="font28 mg-0"><span class="pdr-10">{{tableData.allPeiXunCount || 0}}</span>个</p>
              <p class="f12 mg-0 mgb-25 mgt-10">培训总场次数</p>
            </div>
            <div class="flex1 flex-center-c">
              <p class="font28 mg-0"><span class="pdr-10">{{tableData.allYanXiuCount || 0}}</span>个</p>
              <p class="f12 mg-0 mgb-25 mgt-10">研修总场次数</p>
            </div>
            <div class="flex1 flex-center-c">
              <p class="font28 mg-0"><span class="pdr-10">{{tableData.allSignCount || 0}}</span>个</p>
              <p class="f12 mg-0 mgb-25 mgt-10">研修/培训总报名人数</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </section>
</template>

<script>
import breadcrumbs from "@/components/breadcrumbs.vue";

export default {
  components: {

    breadcrumbs,
  },
  data() {
    return {
      id: '',
      tableData: '',
      msgList: '',
      list: [],
    };
  },
  created() {
    this.query()
    // this.getMessageList()
  },
  methods: {
    jifen() {
      this.$router.push({
        path: "/jifenshangcheng/dingdanduanli",
      })
    },
    caigoudan() {
      this.$router.push({
        path: "/purchaseOrder/list",
      })
    },
    //去通知
    toDetail() {
      this.$router.push({
        path: "/xiaoxi/xiaoxilist",
      })
    },
    query() {
      //获取接口
      this.$api.chart
        .getHomePageTotal({})
        .then((d) => {
          if (d.code == 200) {
            this.tableData = d.data;
          } else {
            this.$message.error(d.msg);
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    // //取后台消息列表
    // getMessageList(){
    //     this.$api.message.getMessageList({})
    //     .then((d) => {
    //         if (d.code == 200) {
    //         this.msgList = d.data;
    //         } else {
    //         this.$message.error(d.msg);
    //         }
    //     })
    //     .catch((e) => {
    //         console.log(e);
    //     });
    // }
  },

}
</script>

<style scoped lang='less'>
.color-FF8C00 {
  color: #ff8c00;
}

.item {
  width: calc((100% - 80px) / 4);
  display: inline-block;
  margin: 10px 10px;
}
.item:nth-child(4n) {
  margin-right: 0px;
}
.bg {
  border-radius: 4px;
  border: 1px solid #eee;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}
.flex1 {
  flex: 1;
}
/deep/ .el-card__header {
  background-color: #f6f6f7;
}
.h200 {
  height: 260px;
}
.font-w6 {
  font-size: 20px;
  font-weight: 700;
}
.pdr-10 {
  font-size: 25px;
  font-weight: 700;
}
.mg-0 {
  font-size: 15px;
}
</style>